import React, { PureComponent } from 'react';
import { Card } from 'antd';
import CreatorAddImage from './CreatorAddImage';
import TagPicker from './TagPicker';
import CascaderSelect from './CascaderSelect';
import AnchorImageList from './AnchorImageList';
import AddLink from './AddLink';
import StructCanvas from './StructCanvas';
import Input from './Input';
import Editor from './Editor/index.js';
import RadioGroup from './RadioGroup';
import CreatorAddItem from './CreatorAddItem';
import CreatorAddSpu from './CreatorAddSpu';
import AddTag from './AddTag';
import Rating from './Rating';
import Title from './Title';
import DateTime from './DateTime';
import Forward from './Forward';
import MerchantTag from './MerchantTag';
import styles from './index.less';

import IceAddVideo from './IceAddVideo'
import Upload from './Upload'

import * as formRender from '../../utils/formRender';
import { TASK_TYPES, CHANNELS, ACT_TYPE } from '../../constants';

export default class TaskForm extends PureComponent {
  state = {}
  handleChange = (name, value) => {
    const { activityId } = this.props;
    const index = this.props.children.findIndex(item => item.name === name);
    if (index >= 0) {
      const children = Object.assign([], this.props.children);
      children[index].props.value = value;
      const tempChildren = formRender.async(children, activityId);
      if (this.props.onChange) this.props.onChange(tempChildren);
    }
  }
  render() {
    const { form, children, operation, activityId, template, activityName, actType, extraProps } = this.props;
    const coverCount = children.find(item => item.name === 'coverCount');
    const itemSpuOption = children.find(item => item.name === 'itemSpuOption');
    const formComponents = [];
    children.forEach((item, index) => {
      if (item.component === 'Input') {
        formComponents.push(<Input key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'Editor') {
        formComponents.push(<Editor key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} activityId={activityId || 0} />);
      } else if (item.component === 'CascaderSelect') {
        formComponents.push(<CascaderSelect key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'CreatorAddImage') {
        formComponents.push(<CreatorAddImage key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'RadioGroup') {
        formComponents.push(<RadioGroup key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'AddLink') {
        formComponents.push(<AddLink key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'CreatorAddItem') {
        formComponents.push(<CreatorAddItem key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'CreatorAddSpu') {
        formComponents.push(<CreatorAddSpu key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'AddTag') {
        formComponents.push(<AddTag key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'TagPicker') {
        formComponents.push(<TagPicker key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'AnchorImageList') {
        formComponents.push(<AnchorImageList key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'StructCanvas') {
        formComponents.push(<StructCanvas key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'Rating') {
        formComponents.push(<Rating key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'Title') {
        formComponents.push(<Title key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />);
      } else if (item.component === 'DateTime' && item.name !== 'scheduledPublishTime') {
        formComponents.push(<DateTime key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />)
      } else if (item.component === 'Forward') {
        formComponents.push(<Forward key={index} form={form} name={item.name} props={item.props} rules={item.rules} onChange={value => this.handleChange(item.name, value)} operation={operation} />)
      } else if (item.component === 'IceAddVideo') {
        formComponents.push(<IceAddVideo key={index}
            {...item} onChange={value => this.handleChange(item.name, value)}
          />)
      } else if (item.component === 'Upload') {
        formComponents.push(<Upload key={index}
          {...item} onChange={value => {
            console.log("Upload: ", item.name, value)
            this.handleChange(item.name, value)}}
        />)
      }
    });
    formComponents.push(<MerchantTag key="merchant_tag" form={form} name="merchant_tag" props={{ label: '商家名称', value: extraProps.merchant_tag.value }} rules={[]}
          onChange={extraProps.merchant_tag.onChange} operation={operation} children={children} />);
    console.log(extraProps.merchant_tag.value)
    let title = ACT_TYPE[actType] || '内容创作';
    if (activityName) title = `${title} > ${activityName}`;
    let tmp = TASK_TYPES.find(item => item.template === template);
    if (tmp) title = `${title} > ${tmp.text}`;
    return (
      <div>
        <p className={styles.titleDefult}>{title}</p>
        <Card bordered={false} bodyStyle={{ padding: '20px 0 40px' }}>
          {formComponents}
        </Card>
      </div>
    )
  }
}
